<template>
    <div>
        <FullCalendar class='demo-app-calendar' :options='calendarOptions'>
        </FullCalendar>
    </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
export default {
    components: {
        FullCalendar
    },
    data() {
        return {
            calendarOptions: {
                plugins: [
                    resourceTimelinePlugin
                ],
                headerToolbar: {
                    left: 'prev,next today',
                    right: 'resourceTimelineDay,resourceTimelineWeek'
                },
                initialView: 'resourceTimelineDay',
                editable: true,
                selectable: true,
                selectMirror: true,
                dayMaxEvents: true,
                weekends: true,
                slotDuration: "'00:10:00'",
                slotLabelInterval: "'00:10:00'",
                resources: [
                    { id: 'a', title: '智升会议室', capacity: 20 },
                    { id: 'b', title: '展厅10寸会议机', capacity: 10 },
                    { id: 'c', title: '展厅15寸会议机', capacity: 15 },
                    { id: 'd', title: '展厅21寸会议机', capacity: 22 },
                ],
                events: [
                    { id: '1', resourceId: 'a', start: '2024-08-20T16:00:00', end: '2024-08-20T17:00:00', title: '会议 1' },
                    { id: '2', resourceId: 'b', start: '2024-08-20T17:00:00', end: '2024-08-20T18:00:00', title: '会议 2' },
                    { id: '3', resourceId: 'c', start: '2024-08-20T17:30:00', end: '2024-08-20T18:30:00', title: '会议 3' },
                ]
            }
        };
    }
};
</script>

<style>
/* 在此添加自定义样式 */
</style>
